<template>
    <div class="pro-table">
        <!-- 查询区域 -->
        <div class="query-view">
            <el-form :model="queryParams" inline label-width="100px">
                <el-form-item v-for="item in formList" :key="item.prop" :label="item.label">
                    <!-- 文本框 -->
                    <el-input v-if="item.type === 'text'" v-model="queryParams[item.prop]" placeholder="请输入"/>
                    <!-- 下拉框 -->
                    <el-select v-if="item.type === 'select'" v-model="queryParams[item.prop]" placeholder="请选择">
                        <el-option v-for="itemValue in item.enum" :key="itemValue.value" :label="itemValue.label"
                                   :value="itemValue.value"/>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>

        <!-- 操作区域 -->
        <div class="button-view">
            <div class="lf">
                <!-- 操作-插槽 -->
                <slot name="actionButton"></slot>
            </div>
            <div v-if="formList.length" class="rf">
                <el-button icon="el-icon-refresh" size="medium" @click="reset">重置</el-button>
                <el-button icon="el-icon-search" size="medium" type="success" @click="search">查询</el-button>
            </div>
        </div>

        <!-- 表格区域 -->
        <div class="table-view">
            <!-- 表头 -->
            <div class="tab-list"><span v-for="item in tabHeaders" :key="item.title">{{ item.title }}</span></div>
            <!-- 表格 -->
            <div v-for="(item, index) in tabData" :key="index" class="tab-table">
                <!-- 数据 -->
                <div v-for="item2 in tabHeaders" :key="item2.title">
                    <slot :$index="index" :name="item2.prop" :rows="item">
                        <!-- 图片类型 -->
                        <el-image v-if="item2.type === 'img'" :preview-src-list="[item[item2.prop]]"
                                  :src="item[item2.prop]"
                                  class="tab-cover"/>
                        <!-- 标签类型 -->
                        <el-tag v-else-if="item2.type === 'tag'" effect="dark" type="success">{{
                            item[item2.prop]
                            }}
                        </el-tag>
                        <!-- 链接类型 -->
                        <el-link v-else-if="item2.type === 'link'" :href="item[item2.prop]" target="_blank"
                                 type="primary">{{ item[item2.prop] }}
                        </el-link>
                        <!-- 文本类型 -->
                        <span v-else>{{ item[item2.prop] }}</span>
                    </slot>
                </div>
            </div>
            <!-- 分页 -->
            <el-pagination
                    :current-page="pageable.pageNum"
                    :hide-on-single-page="true"
                    :page-size="pageable.pageSize"
                    :total="pageable.total"
                    background
                    layout="total,prev, pager, next"
                    @current-change="pageChange"
            >
            </el-pagination>
        </div>

        <!-- 空状态区域 -->
        <div v-if="!tabData.length" class="nodatas">暂无数据</div>
    </div>
</template>

<script>
export default {
    name: 'ProTable',
    props: {
        tabHeaders: Array,
        formList: {type: Array, default: () => []},
        api: Function,
        initParams: {type: Object, default: () => ({})}
    },
    data() {
        return {
            tabData: [],
            pageable: {pageNum: 1, pageSize: 5},
            totalParams: {},
            queryParams: {}
        };
    },
    mounted() {
        const {pageNum, pageSize} = this.initParams;
        this.pageable.pageNum = pageNum;
        this.pageable.pageSize = pageSize;
        this.queryParams = {...this.initParams};
        this.search();
    },
    methods: {
        async getTableData() {
            Object.assign(this.totalParams, this.pageable);
            const {data} = await this.api(this.totalParams);
            this.tabData = data.list;
            this.pageable = {
                pageNum: data.pageNum,
                pageSize: data.pageSize,
                total: data.total
            };
        },
        search() {
            Object.assign(this.totalParams, this.queryParams);
            this.getTableData();
        },
        reset() {
            this.totalParams = {};
            this.queryParams = {...this.initParams};
            this.pageable.pageNum = 1;
            this.search();
        },
        pageChange(index) {
            this.pageable.pageNum = index;
            this.getTableData();
        }
    }
};
</script>

<style lang="scss" scoped>
.tab-cover {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.button-view {
  display: flex;
  justify-content: space-between;
}
</style>
